<template>
  <div class="printForm">
    <table class="printTable">
      <tr>
        <td class="tit">{{ $t('会议主题') }}</td>
        <td>{{ form.meetingTitle }}</td>
        <td class="tit">{{ $t('会议类型') }}</td>
        <td>
          <el-select v-model="form.meetingType" @change="meetingTypeChange">
            <el-option
              v-for="(type, index) in mtTypeOptions"
              :key="index"
              :value="type.id"
              :label="$t(type.mtTypeLabel)"
              class="text"
            />
          </el-select>
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('开始日期') }}</td>
        <td>
          {{ parseTime(form.startTime) }}
        </td>
        <td class="tit">{{ $t('会议时间') }}</td>
        <td>{{ parseTime(form.meetingTime) }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('常规参与人员') }}</td>
        <td>
          <UserSelect
            v-model="form.participants"
          />
        </td>
        <td class="tit">{{ $t('其他内部参与人员') }}</td>
        <td>
          <UserSelect
            v-model="form.internalParticipants"
            multiple
          />
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('会议地点') }}</td>
        <td>
          <el-select v-model="form.meetingAddress">
            <el-option
              v-for="(item, index) in meetingRoomOptions"
              :key="index"
              :label="$t(item.place)"
              :value="item.id"
            />
          </el-select>
        </td>
        <td class="tit">{{ $t('秘书') }}</td>
        <td>
          <UserSelect v-model="form.secretary" />
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('外部参会人员') }}</td>
        <td>
          {{ form.externalParticipants }}
        </td>
        <td class="tit">{{ $t('会议主要议题') }}</td>
        <td>
          {{ form.meetingMainTitle }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('备注') }}</td>
        <td colspan="3">
          {{ form.remark }}
        </td>
      </tr>
    </table>

    <div class="area-header">
      <span class="area-header-title">{{ $t('项目上会') }}</span>
    </div>
    <el-table :data="form.mtBusinessDetailList" border>
      <el-table-column :label="$t('项目类型')" align="center" prop="businessType">
        <template slot-scope="scope">
          <el-select v-model="scope.row.businessType" clearable :disabled="scope != null && scope.row.id != null" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in businessTypeOptions"
              :key="dict.dictValue"
              :value="dict.dictValue"
              :label="$t(dict.dictLabel)"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目名称')" align="center" prop="serviceName">
        <template slot-scope="scope">
          <MainBodySelect
            v-model="scope.row.serviceId"
            :parameters="scope.row.businessType"
            :disabled="scope.row != null && scope.row.id != null"
            @change="serviceChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('会议轮次')" align="center" prop="meetingRounds">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.meetingRounds" :disabled="scope != null && scope.row.id != null" :controls="false" :placeholder="$t('会议轮次')" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('申请时间')" align="center" prop="applyTime">
        <template slot-scope="scope">
          <DatePicker
            v-model="scope.row.applyTime"
            :placeholder="$t('申请时间')"
            :disabled="scope.row != null && scope.row.id != null"
          />

        </template>
      </el-table-column>
      <el-table-column :label="$t('申请人')" align="center" prop="applicant">
        <template slot-scope="scope">
          <UserSelect
            v-model="scope.row.applicant"
            :placeholder="$t('申请人')"
            :disabled="scope.row != null && scope.row.id != null"
          />
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
    import { saveMtBusiness, getMtBusiness, findByPushIdList } from '@/api/oa/business/mtBusiness'
    import { findAll } from '@/api/oa/type/mtType'
    import { listOaMeetingRoom } from '@/api/oa/meeting/oaMeetingRoom'
    import MainBodySelect from '@/components/MainBodySelect/index'
    export default {
        components: {
          MainBodySelect
        },
        props: {
          businessDetailIdList: {
            type: Array,
            default: () => []
          }
        },
        data() {
            return {
                // 表单参数
                form: {
                  // 会议时间
                  meetingTime: undefined,
                  // 上会项目
                  mtBusinessDetailList: []
                },
                // 遮罩层
                loading: false,
                // 流程表单是否展示
                actFormOpen: false,
                // 会议类型
                mtTypeOptions: [],
                // 会议室设置
                meetingRoomOptions: [],
                // 业务类型
                businessTypeOptions: [],
                // 会议类型
                meetingTypeOptions: []
            }
        },
        created() {
          findAll().then(response => {
            this.mtTypeOptions = response.data
           })
          listOaMeetingRoom(null).then(response => {
            this.meetingRoomOptions = response.rows
          })
          this.getDicts('my_business_type').then(response => {
            this.businessTypeOptions = response.data
          })
          this.getDicts('mt_type').then(response => {
            this.meetingTypeOptions = response.data
          })
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getMtBusiness(data.id).then(response => {
                        this.form = response.data
                        if (this.form.meetingStartTime && this.form.meetingEndTime) {
                          this.form.meetingTime = []
                          this.form.meetingTime.push(this.form.meetingStartTime)
                          this.form.meetingTime.push(this.form.meetingEndTime)
                        }
                      this.loading = false
                    })
                } else {
                    this.reset()
                    if (this.businessDetailIdList.length > 0) {
                      findByPushIdList(this.businessDetailIdList).then(response => {
                        this.form.mtBusinessDetailList = response.data
                        this.loading = false
                      })
                    } else {
                      this.loading = false
                    }
                }
            },
            businessTypeFormat(row) {
              return this.selectDictLabel(this.businessTypeOptions, row.businessType)
            },
            meetingTypeFormat(row) {
              return this.selectDictLabel(this.meetingTypeOptions, row.meetingType)
            },
            // 表单重置
            reset() {
                this.form = {
                id: undefined,
                meetingTitle: undefined,
                meetingType: undefined,
                meetingTime: undefined,
                startTime: undefined,
                meetingStartTime: undefined,
                meetingEndTime: undefined,
                participants: undefined,
                internalParticipants: undefined,
                meetingAddress: undefined,
                secretary: undefined,
                externalParticipants: undefined,
                meetingMainTitle: undefined,
                remark: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                delFlag: undefined,
                mtBusinessDetailList: []
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                this.$parent.$parent.formOpen = false
                // 刷新list页面
                this.$parent.$parent.getList()
            },
            /** 提交按钮 */
            submitForm: function() {
                if (this.form.meetingTime != null && this.form.meetingTime.length > 1) {
                  this.form.meetingStartTime = this.form.meetingTime[0]
                  this.form.meetingEndTime = this.form.meetingTime[1]
                }
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveMtBusiness(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.$emit('resetDetailList')
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    }
                })
           },
          // 添加上会项目
          addBusinessDetail() {
              const row = {
                id: undefined,
                businessType: undefined,
                businessName: undefined,
                meetingType: undefined,
                meetingRounds: undefined,
                applyTime: undefined,
                applicant: undefined
              }
            if (!(this.form.mtBusinessDetailList instanceof Array)) {
              this.$set(this.form, 'mtBusinessDetailList', [])
            }
            this.$nextTick(() => {
              this.form.mtBusinessDetailList.push(row)
            })
          },
          // 把选择的会议类型的常规参与人员和秘书显示出来
          meetingTypeChange(val) {
            for (let i = 0; i < this.mtTypeOptions.length; i++) {
              if (val === this.mtTypeOptions[i].id) {
                this.form.secretary = this.mtTypeOptions[i].secretary
                this.form.participants = this.mtTypeOptions[i].participants
              }
            }
          },
          serviceChange(row) {
            var count = 0
            for (let i = 0; i < this.form.mtBusinessDetailList.length; i++) {
              if (row.serviceId === this.form.mtBusinessDetailList[i].serviceId) {
                count++
                if (count > 1) {
                  this.msgError(this.$t('同一项目只能选择一次'))
                  this.$set(this.form.mtBusinessDetailList[i], 'serviceId', null)
                  return
                }
              }
            }
          }
        }
    }
</script>

